<template>
  <view class="container">
    <view class="status-bar"></view>

    <view class="main-content">
      <view class="map-section">
        <map
          class="map-view"
          :latitude="mapCenter.latitude"
          :longitude="mapCenter.longitude"
          :scale="scale"
          :markers="markers"
          :include-points="includePoints"
          :show-location="true"
          :enable-3D="true"
          :enable-overlooking="true"
          :enable-satellite="true"
          @markertap="onMarkerTap"
        ></map>

        <view class="map-controls">
          <view class="zoom-btn" @tap="zoomIn">＋</view>
          <view class="zoom-btn" @tap="zoomOut">－</view>
        </view>

      </view>

      <scroll-view class="cards-section" scroll-y>
        <view class="cards-header">
          <text class="section-title">武夷山石刻</text>
          <text class="section-sub">已示例标注 5 处，可继续扩展</text>
        </view>
        <view class="card" v-for="stone in stones" :key="stone.id" @tap="focusStone(stone)">
          <view class="card-left">
            <image class="thumb" :src="stone.image" mode="aspectFill" />
          </view>
          <view class="card-main">
            <text class="card-title">{{ stone.name }}</text>
            <text class="card-desc">{{ stone.brief }}</text>
            <text class="card-meta">位置：{{ stone.locationDesc }}</text>
          </view>
          <view class="card-right" @tap.stop="goToDetail(stone)">
            <text class="goto">查看</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="detail-mask" v-if="showDetail" @tap="closeDetail">
      <view class="detail-panel" @tap.stop>
        <view class="detail-header">
          <text class="detail-title">{{ selectedStone?.name }}</text>
          <text class="detail-sub">{{ selectedStone?.locationDesc }}</text>
        </view>
        <scroll-view class="detail-body" scroll-y>
          <text class="detail-text">{{ selectedStone?.intro }}</text>
          <text class="detail-text">历史背景：{{ selectedStone?.history }}</text>
          <text class="detail-text">坐标：{{ selectedStone?.latitude }}, {{ selectedStone?.longitude }}</text>
        </scroll-view>
        <view class="detail-actions">
          <view class="action-btn" @tap="closeDetail">关闭</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const mapCenter = ref({ latitude: 27.733, longitude: 118.035 })
const scale = ref(13)
const showDetail = ref(false)
const selectedStone = ref(null)

const stones = ref([
  {
    id: 1,
    name: '天游峰题刻',
    latitude: 27.7405,
    longitude: 118.032,
    locationDesc: '天游峰景区步道旁岩壁',
    brief: '宋代名士题刻，字体遒劲，保存完好。',
    intro: '天游峰为武夷山最负盛名的峰顶之一，岩壁上留有历代文人的题刻，展现古人登临抒怀之情。',
    history: '主要形成于宋元时期，后经明清修缮与保护。',
    image: '/static/data/1.jpg'
  },
  {
    id: 2,
    name: '九曲溪摩崖',
    latitude: 27.725,
    longitude: 118.02,
    locationDesc: '九曲溪沿岸岩面',
    brief: '舟行两岸，岩面多见摩崖诗刻。',
    intro: '九曲溪两岸岩壁刻有诗文，内容多为赞景咏怀，配合溪流山色，极具意境。',
    history: '多为明清时期文人舟游所题。',
    image: '/static/data/2.jpg'
  },
  {
    id: 3,
    name: '一线天石刻',
    latitude: 27.748,
    longitude: 118.05,
    locationDesc: '一线天裂隙入口处',
    brief: '入口岩壁留题，记载古人探幽足迹。',
    intro: '一线天以狭缝天光闻名，入口岩壁石刻记述游历与感怀。',
    history: '清代游记式题刻较多。',
    image: '/static/data/1.jpg'
  },
  {
    id: 4,
    name: '虎啸岩诗刻',
    latitude: 27.71,
    longitude: 118.06,
    locationDesc: '虎啸岩观景平台下方岩面',
    brief: '诗刻工整，刀法利落。',
    intro: '虎啸岩以回声闻名，岩面诗刻多咏其声，富于动感。',
    history: '明清时期相继增刻并修护。',
    image: '/static/data/2.jpg'
  },
  {
    id: 5,
    name: '大红袍景区碑刻',
    latitude: 27.733,
    longitude: 118.07,
    locationDesc: '大红袍景区山谷侧壁',
    brief: '茶文化与碑刻结合的文化景观。',
    intro: '以茶闻名的大红袍景区，同见文化碑刻，展现茶与文的交融。',
    history: '近现代亦有补刻与保护说明。',
    image: '/static/data/1.jpg'
  }
])

const markers = computed(() =>
  stones.value.map((s) => ({
    id: s.id,
    latitude: s.latitude,
    longitude: s.longitude,
    title: s.name,
    iconPath: '/static/tabbar/map-active.png',
    width: 28,
    height: 28,
    callout: {
      content: s.name,
      color: '#1b5e20',
      bgColor: '#ffffff',
      borderRadius: 8,
      display: 'BYCLICK',
      padding: 6
    }
  }))
)

const includePoints = computed(() =>
  stones.value.map((s) => ({ latitude: s.latitude, longitude: s.longitude }))
)

const onMarkerTap = (e) => {
  const id = e?.detail?.markerId
  const f = stones.value.find((x) => x.id === id)
  if (f) {
    selectedStone.value = f
    showDetail.value = true
  }
}

const focusStone = (stone) => {
  mapCenter.value = { latitude: stone.latitude, longitude: stone.longitude }
  scale.value = Math.min(18, Math.max(10, scale.value))
  selectedStone.value = stone
  showDetail.value = true
}

const goToDetail = (stone) => {
  uni.navigateTo({
    url: '/pages/detail/detail'
  })
}

const zoomIn = () => {
  scale.value = Math.min(20, scale.value + 1)
}

const zoomOut = () => {
  scale.value = Math.max(3, scale.value - 1)
}

const closeDetail = () => {
  showDetail.value = false
}

const goBack = () => {
  console.log('返回')
}
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: #f5f7fa;
  color: #2e7d32;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.status-bar {
  height: 44px;
  width: 100%;
}

/* header 已移除 */

.main-content {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 16px;
  display: block;
}

.map-section {
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 300px;
  max-height: 500px;
}

.map-view {
  width: 100%;
  height: 100%;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow: hidden;
  position: relative;
}

.map-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zoom-btn {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3498db;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* 指引提示已移除 */


.cards-section {
  flex: 1;
  padding: 12px 0 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
}

.cards-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 92%;
}

.section-sub {
  font-size: 12px;
  color: #7f8c8d;
}

.card {
  background: #ffffff;
  border: 1px solid #e8ecef;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
  width: 92%;
}

.card-left {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: #f0f4f8;
  flex-shrink: 0;
}

.thumb {
  width: 100%;
  height: 100%;
}

.card-main {
  flex: 1;
  min-width: 0;
}

.card-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-desc {
  display: block;
  font-size: 12px;
  color: #5a6c7d;
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-meta {
  display: block;
  font-size: 11px;
  color: #7f8c8d;
  margin-top: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-right {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.goto {
  background: #4caf50;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 12px;
  display: inline-block;
  white-space: nowrap;
}

.detail-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 99;
}

.detail-panel {
  width: 100%;
  max-height: 60vh;
  background: rgba(255, 255, 255, 0.98);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
}

.detail-header {
  margin-bottom: 8px;
}

.detail-title {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
}

.detail-sub {
  display: block;
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 4px;
}

.detail-body {
  max-height: 34vh;
}

.detail-text {
  display: block;
  font-size: 14px;
  color: #5a6c7d;
  line-height: 1.7;
  margin-top: 10px;
}

.detail-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.action-btn {
  background: #3498db;
  color: #fff;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 14px;
}
</style>
